<script setup>
	import {computed} from 'vue'

	const props = defineProps({
		avatarUrl: {
			type: String,
			default: 'http://img.xianjc.top/avatar/default.jpg'
		},
		size: {
			type: Number,
			default: 40
		}
	})

	const style = computed(() => {
		return {
			width: props.size + 'px',
			height: props.size + 'px',
			backgroundImage: `url(${props.avatarUrl})`
		}
	})

</script>

<template>
	<!--头像组件-->
	<div class="avatar" v-bind:style="style"></div>
</template>

<style scoped lang="scss">

	.avatar {
		border-radius: 50%;
		position: relative;
		background-size: 100% 100%;
	}

</style>